<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="550px"
    @close="handleClose">
    <el-form ref="modelForm" :model="modelForm" :rules="rules" label-width="80px">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="modelForm.name" placeholder="角色名称"/>
      </el-form-item>
      <el-form-item label="角色标识" prop="code">
        <el-input v-model="modelForm.code" placeholder="角色标识"/>
      </el-form-item>
      <el-form-item label="备注" prop="description">
        <el-input v-model="modelForm.description" placeholder="备注"/>
      </el-form-item>
      <el-form-item label="显示排序" prop="sort">
        <el-input v-model="modelForm.sort" placeholder="序号"/>
      </el-form-item>
      <el-form-item label="资源状态" required>
        <el-radio-group v-model="modelForm.status">
          <el-radio
            v-for="item in dictOptions"
            :key="item.dictCode"
            :label="item.dictValue"
          >{{ item.dictLabel }}</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="resetForm">取 消</el-button>
      <el-button :loading="isSubmit" type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import resultCode from '@/utils/resultCode'
import { add, update } from '@/api/role'

export default {
  data() {
    return {
      visible: false,
      isSubmit: false,
      title: '添加角色',
      dictOptions: [],
      dataList: [],
      modelForm: {
        id: null,
        name: null,
        code: null,
        description: null,
        sort: null,
        status: null
      },
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入角色标识', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init(dicts, model) {
      this.dictOptions = dicts
      if (model) { // 修改逻辑，回填数据
        this.modelForm.id = model.id || null
        this.modelForm.name = model.name || null
        this.modelForm.sort = model.sort || null
        this.modelForm.status = model.status || null
        this.modelForm.code = model.code || null
        this.modelForm.description = model.description || null
      } else { // 添加逻辑
        this.title = '添加角色'
        this.modelForm.id = null
        this.modelForm.name = null
        this.modelForm.code = null
        this.modelForm.description = null
        this.modelForm.sort = null
        this.modelForm.status = null
        this.dictOptions.forEach(dict => {
          if (dict.isDefault === 'Y') {
            this.modelForm.status = dict.dictValue
          }
        })
      }
      this.visible = true
    },
    handleSubmit: function() {
      this.$refs.modelForm.validate((valid) => {
        if (!valid) {
          return false
        }
        this.isSubmit = true
        if (this.modelForm.id == null) { // 新增
          add(this.modelForm).then(response => {
            const result = response.data // 请求接口返回的内容
            if (result.code === resultCode.SUCCESS) {
              this.visible = false
              this.$emit('refreshDataList')
              this.$message.success('添加成功')
            }
            this.isSubmit = false
          }).catch(err => {
            this.isSubmit = false
          })
        } else {
          update(this.modelForm).then(response => {
            const result = response.data // 请求接口返回的内容
            if (result.code === resultCode.SUCCESS) {
              this.visible = false
              this.$emit('refreshDataList')
              this.$message.success('修改成功')
            }
            this.isSubmit = false
          })
        }
      })
    },
    resetForm: function() {
      this.$refs.modelForm.resetFields()
      this.visible = false
    },
    handleClose: function() {
      this.$refs.modelForm.resetFields()
    }
  }
}
</script>
